<template>
	<view class="wrap">
		<u-navbar title="添加计划" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="card">
			<!-- 计划类型列 -->
			<view class="list">
				<view class="list-name">计划类型</view>
				<view class="u-flex" @click="selectTypeShow = true">
					<view :class="['u-flex-1 list-info', defaultType.label ?'active':'']">
						{{defaultType.label || '请选择计划类型'}}
					</view>
					<u-image src="/static/images/arrow.png" width="16" height="16" :lazy-load="false"
						:show-loading="false" :fade="false"></u-image>
				</view>
			</view>

			<!-- 计划起止时间列 -->
			<view class="list">
				<view class="list-name">计划起止时间</view>
				<view class="u-flex-1 u-flex">

					<!-- 天计划、周计划、月计划 -->
					<template v-if="[1,2,3].includes(defaultType.value)">
						<view class="u-flex-1 u-flex u-row-right">
							<view :class="['list-info', selectStartTime ?'active':'']"
								@click="showDatePicker(defaultType.value)">
								{{selectStartTime ? selectStartTime +' — '+ selectEndTime : '请选择起止时间'}}
							</view>
						</view>
					</template>

					<!-- 年计划 -->
					<view class="u-flex-1 u-flex u-row-right" v-if="defaultType.value==4">
						<view :class="['list-info', selectStartTime ?'active':'']">
							<template v-if="selectStartTime">
								<text @click="showYearStartPicker = true">{{selectStartTime}}</text> — <text
									@click="showYearPicker = true">{{selectEndTime}}</text>
							</template>
							<template v-else>请选择起止时间</template>
						</view>
					</view>

					<!-- 其他 -->
					<view class="u-flex-1 u-flex u-row-right"
						v-if="!defaultType.value || [7,8,9].includes(defaultType.value)">
						<view :class="['list-info list-time', selectStartTime ?'active':'']"
							@click="selectTimeClick('1')">
							{{selectStartTime || '请选择开始时间'}}
						</view>
						<view :class="['list-info list-time', selectEndTime ?'active ':'']"
							@click="selectTimeClick('2')">
							{{selectEndTime || '请选择结束时间'}}
						</view>
					</view>

					<u-image src="/static/images/arrow.png" width="16" height="16" :lazy-load="false"
						:show-loading="false" :fade="false"></u-image>
				</view>
			</view>

			<!-- 计划标题 -->
			<view class="list">
				<view class="list-name">计划标题</view>
				<u--input :clearable="false" maxlength="-1" class="list-info u-flex-1" input-align="right"
					v-model="planTitle" placeholder="请输入计划标题" style="border:none;"
					placeholder-style="font-size:24rpx;color:#999">
				</u--input>
				<u-image src="/static/images/arrow.png" width="16" height="16" :lazy-load="false" :show-loading="false"
					:fade="false"></u-image>
			</view>
		</view>

		<view class="correlation-card" v-if="defaultType.value == 1">
			<view class="name">当天相关联的计划(0)</view>
			<u-image @click="handleNavagate" src="/static/images/arrow.png" width="16" height="16" :lazy-load="false"
				:show-loading="false" :fade="false"></u-image>
		</view>

		<!-- 事项列表 -->
		<view class="card-list" v-if="planListLen">
			<view v-for="(item,index) in planList" class="card" :key="index">
				<view class="header">
					<u--input v-model="item.JHFL" :clearable="false" input-align="left" placeholder="请输入计划事项"
						placeholder-style="font-size:28rpx;color:#999">
					</u--input>
					<view class="del-box" @click="handleOrAddMatter(index)">
						<u-icon name="trash" custom-prefix="custom-icon" color="#999999" size="23">
						</u-icon>
					</view>
				</view>
				<view class="content">
					<view class="row" v-for="(infoItem, infoindex) in item.JHXQ" :key="infoindex">
						<div class="col">
							<u--textarea count maxlength="500" autoHeight class="content-ipt" v-model="infoItem.data"
								placeholder="请输入计划详情" placeholder-style="font-size:28rpx;color:#999">
							</u--textarea>
							<view class="add-icon" @click="handleAddDelInfo(item.JHXQ)" v-if="!infoindex">
								<u-icon name="plus" custom-prefix="custom-icon" color="#6f7175" size="18">
								</u-icon>
							</view>
							<view class="sub-icon" @click="handleAddDelInfo(item.JHXQ, infoindex)" v-else>
								<u-icon name="minus" custom-prefix="custom-icon" color="#6f7175" size="18">
								</u-icon>
							</view>
						</div>

						<view class="footer">
							<template v-for="(footerItem, footerIndex) in cardFooterTabs">
								<view :key="footerItem" class="footer-item"
									@click="handleFooterClick(footerItem, index, infoindex)">
									{{footerItem}}
								</view>
							</template>
						</view>

						<view class="footer-tip">
							<u-icon v-if="infoItem.CompletionTime" name="clock-fill" custom-prefix="custom-icon"
								color="#FF8A00" size="14">
							</u-icon>
							<view style="margin-right: 8rpx;">{{ infoItem.CompletionTime}}</view>
							<u-icon v-if="infoItem.GLKH" name="man-add-fill" custom-prefix="custom-icon" color="#FF8A00"
								size="14">
							</u-icon>
							<template v-if="infoItem.GLKH">
								<view v-for="glkhItem in infoItem.GLKH ? infoItem.GLKH : [] " :key="glkhItem.id">
									{{glkhItem.name + ','}}
								</view>
							</template>
							<u-icon v-if="infoItem.GLR" name="account-fill" custom-prefix="custom-icon" color="#FF8A00"
								size="14">
							</u-icon>
							<template v-if="infoItem.GLR">
								<view v-for="glrItem in infoItem.GLR ? infoItem.GLR : []" :key="glrItem.id">
									{{glrItem.name + ','}}
								</view>
							</template>
						</view>
					</view>

					<view class="rowTwo">
						<view class="select-type" @click="handleMatterTypeClick(index)">
							<view :style="{color: item.JHSLLX? '#000' : ''}" style="margin-right: 10px;">
								{{item.JHSLLX? item.JHSLLX : '计划类型' }}
							</view>
							<u-icon :name="arrowName" custom-prefix="custom-icon" color="#6f7175" size="18">
							</u-icon>
						</view>
						<u--input class="content-ipt" v-model="item.Sales" :clearable="false" type="number"
							input-align="left" placeholder="请输入计划数量" style="border:none;"
							placeholder-style="font-size:28rpx;color:#999">
						</u--input>
					</view>
				</view>
				<!-- <view class="footer">
					<template v-for="(footerItem, footerIndex) in cardFooterTabs">
						<view :key="footerItem" class="footer-item" @click="handleFooterClick(footerItem, index)">
							{{footerItem}}
						</view>
					</template>
				</view> -->
				<!-- <view class="footer-tip">
					<u-icon v-if="item.CompletionTime" name="clock-fill" custom-prefix="custom-icon" color="#FF8A00"
						size="14">
					</u-icon>
					<view style="margin-right: 8rpx;">{{ item.CompletionTime}}</view>
					<u-icon v-if="item.GLKH" name="man-add-fill" custom-prefix="custom-icon" color="#FF8A00" size="14">
					</u-icon>
					<template v-if="item.GLKH">
						<view v-for="glkhItem in item.GLKH ? item.GLKH : [] " :key="glkhItem.id">{{glkhItem.name + ','}}
						</view>
					</template>
					<u-icon v-if="item.GLR" name="account-fill" custom-prefix="custom-icon" color="#FF8A00" size="14">
					</u-icon>
					<template v-if="item.GLR">
						<view v-for="glrItem in item.GLR ? item.GLR : []" :key="glrItem.id">{{glrItem.name + ','}}
						</view>
					</template>
				</view> -->
			</view>
		</view>

		<!-- 添加事项 -->
		<button class="add-btn" @click="($event) => handleOrAddMatter()">
			<u-icon name="plus" custom-prefix="custom-icon" color="#157EFB" size="16">
			</u-icon>
			添加事项
		</button>

		<!-- 底部操作区域 -->
		<div class="next-card-btns">
			<template v-if="[2,3,4].includes(defaultType.value)">
				<button class="next-btn" @click="() => handleNext()">下一步</button>
			</template>
			<template v-else>
				<button class="scratch-paper-btn" @click="() => handleScratchPaper()">草稿纸</button>
				<button class="next-btn" @click="() => handleSubmit()">>发布</button>
			</template>
		</div>

		<!-- 关联客户弹窗 -->
		<u-popup :show="showClient" mode="bottom" customStyle="height: 80%" :overlay="false">
			<view class="popup">
				<selectCorrelation v-if="showClient" @hideSubClientPop="handleBack"
					@updateSubClient="handleUpdateClient" />
			</view>
		</u-popup>
		<u-popup :show="showPersonnel" mode="bottom" customStyle="height: 80%" :overlay="false">
			<view class="popup">
				<associatedPersonnel v-if="showPersonnel" @hideSelectPop="handleBack"
					@selectCorrelationSure="handleCorrelationSure" />
			</view>
		</u-popup>


		<!-- 计划类型选择 -->
		<u-picker :show="selectTypeShow" :defaultIndex="[defaultType.value]" :columns="[planTypeList]" keyName="label"
			@confirm="selectTypeConfirm" @cancel="selectTypeShow = false"></u-picker>
		<!-- 计划事项中计划类型 -->
		<u-picker cancelText="清空" :show="showMaterType" :columns="[['数量', '金额']]" @confirm="onMaterTypeConfirm"
			@cancel="handleMaterTypeCancel"></u-picker>
		<!-- 日计划选择器 -->
		<u-datetime-picker ref="datePicker" :show="showDayPicker" v-model="timeValue" :formatter="dayformatter"
			mode="date" @cancel="showDayPicker = false" @confirm="onDayConfirm($event)"></u-datetime-picker>
		<!-- 月计划选择器 -->
		<u-datetime-picker ref="yearmonthPicker" :show="showMonthPicker" v-model="timeValue" mode="year-month"
			@cancel="showMonthPicker = false" :formatter="monthformatter"
			@confirm="onMonthConfirm($event)"></u-datetime-picker>
		<!-- 年计划 -->
		<u-picker :defaultIndex="[14]" :show="showYearPicker" :columns="[yarnList]" keyName="label"
			@confirm="onYearConfirm" @cancel="showYearPicker = false"></u-picker>
		<!-- 周计划 -->
		<w-picker :visible.sync="showWeekPicker" mode="week" startYear="2010" endYear="2060" :value="selectStartTime"
			:current="true" @confirm="onWeekConfirm($event)"></w-picker>
		<!-- 计划起始时间 -->
		<u-datetime-picker ref="resttimePicker" :show="showRestPicker" v-model="timeValue" mode="datetime"
			:formatter="restformatter" @confirm="onRestConfirm($event)"
			@cancel="showRestPicker = false"></u-datetime-picker>
		<!-- 完成时间 -->
		<u-datetime-picker ref="scuessPicker" :show="showScuessPicker" v-model="timeValue" mode="datetime"
			:formatter="scuessformatter" @confirm="onScuessConfirm($event)"
			@cancel="showScuessPicker = false"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import wPicker from "@/packagePlan/components/w-picker/w-picker.vue"; //周计划选择
	import selectCorrelation from "@/packagePlan/components/selectCorrelation.vue"
	import associatedPersonnel from "@/packagePlan/components/associatedPersonnel.vue"

	export default {
		components: {
			wPicker,
			selectCorrelation,
			associatedPersonnel
		},
		data() {
			return {
				defaultType: {
					value: -1,
					label: ''
				}, //计划类型
				planTitle: '',
				timeValue: Number(new Date()), // 当前时间的时间戳
				selectStartTime: "", // 计划开始时间
				selectEndTime: "", // 计划结束时间
				datetimeMode: 'date',
				selectTypeShow: false, // (一级)计划类型
				showWeekPicker: false, // 周计划选择
				showDayPicker: false, // 天计划
				showMonthPicker: false, // 月计划
				showYearPicker: false, // 年计划
				showRestPicker: false, // 其他计划
				showMaterType: false, // 计划事项中计划类型
				showScuessPicker: false, //完成时间的picker
				cardFooterTabs: ['关联客户', '关联人员', '完成时间'],
				weekcnLists: ['一', '二', '三', '四', '五'],
				restType: '1',
				yarnList: [],
				defaultYearIndex: Number(new Date().getFullYear()) - 2010,
				planList: [],
				startEndTime: {},
				arrowName: 'arrow-down', // arrow-up向上/arrow-down向下 icon
				currIndex: 0, // 选中的计划事项的索引
				currInfoindex: 0, // 选中计划事项中计划详情的索引
				showClient: false, // 关联客户
				showPersonnel: false, // 关联人员
				params: {
					JHLX: '',
					JHBT: '',
					JHStartTime: '',
					JHEndTime: '',
					JHXQ: [],
					SJJHID: '',
					SJJHXQID: '',
					JHJD: '',
					mobile: '',
					ygbh: ''
				} // 提交数据
			};
		},
		onLoad(option) {
			const {
				plantype
			} = option
			const res = this.planTypeList.find(item => item.value == plantype)
			if (res) {
				this.defaultType = {
					label: res.label,
					value: res.value
				}
			}
			this.handleChangeOrMountd()
			this.yarnList = []
			for (var i = 2010; i <= 2060; i++) {
				this.yarnList.push({
					label: i + '年',
					value: i
				})
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datePicker.setFormatter(this.dayformatter)
			this.$refs.yearmonthPicker.setFormatter(this.monthformatter)
			this.$refs.resttimePicker.setFormatter(this.restformatter)
			this.$refs.scuessPicker.setFormatter(this.scuessformatter)
		},
		computed: {
			...mapState(['planSaleTypeList', 'planTypeList']),
			planListLen() {
				return this.planList.length > 0
			}
		},
		methods: {
			longDateFormate(time, type) { // 格式化日期
				const numFormat = (d = '') => {
					const data = d * 1;
					return data < 10 ? '0' + data : data;
				}

				if (!time) return '';

				const timestamp = new Date(time).getTime();
				if (timestamp < 0) {
					return ''
				}

				if (typeof time === 'string') {
					time = time.replace(/T/g, ' '); //去掉T
					time = time.replace(/-/g, '/');
					time = time.replace(/\.\d+/, ' '); //去掉毫秒
				}

				const timeFlag = new Date(time);

				let y = timeFlag.getFullYear();
				let m = numFormat(timeFlag.getMonth() + 1);
				let d = numFormat(timeFlag.getDate());
				let h = numFormat(timeFlag.getHours());
				let min = numFormat(timeFlag.getMinutes());
				let s = numFormat(timeFlag.getSeconds());
				if (type == 'ymd') {
					return `${y}-${m}-${d}`;
				}
				if (type == 'ymd-hms') {
					return `${y}-${m}-${d} ${h}:${min}:${s}`;
				}
				if (type == 'hm') {
					return `${h}:${min}`;
				}
				if (type == 'cnymd') {
					return `${y}年${m}月${d}日`;
				}

				return `${y}-${m}-${d} ${h}:${min}`;
			},
			getWeekNam(y, m, d) { // 判断传入时间为星期几
				const list = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				let myDate = new Date();
				myDate.setFullYear(y, m - 1, d);
				return list[myDate.getDay()]
			},
			getMonthWeekCur(a, b, c) { //一月中的第几周
				let date = new Date(a, parseInt(b) - 1, c),
					w = date.getDay(),
					d = date.getDate();
				return Math.ceil(
					(d + 6 - w) / 7
				);
			},
			showDatePicker(e) {
				e == 1 && (this.showDayPicker = true);
				e == 2 && (this.showWeekPicker = true);
				e == 3 && (this.showMonthPicker = true);
			},
			getWeekDate(year, month, weekday) {
				year = year * 1;
				month = month * 1;
				let list = [];
				let d = new Date();
				d.setFullYear(year, month - 1, 1);
				const w1 = d.getDay();
				d.setDate(d.getDate() - w1);
				//周日~周一为一周
				const start = d.setDate(d.getDate() + 7 * (weekday - 1) + 1);
				const end = d.setDate(d.getDate() + 6);
				return {
					start: start,
					end: end
				}
			},
			getMonthDays(year, month) { //获取某年某月的天数
				//判断年份是否为润年
				const isLeapYear = (yearn) => {
					return (yearn % 400 == 0) || (yearn % 4 == 0 && yearn % 100 != 0);
				}
				return [31, (isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month - 1];
			},
			handleChangeOrMountd(value = this.defaultType.value) {
				const year = new Date().getFullYear()
				const month = new Date().getMonth()
				const day = new Date().getDate()
				switch (value) {
					case 1:
						this.selectStartTime = this.longDateFormate(new Date(), 'ymd')
						this.selectEndTime = this.longDateFormate(new Date(), 'ymd')
						this.planTitle =
							`${this.longDateFormate(new Date(), 'cnymd')} ${this.getWeekNam(year,month + 1,day)}计划`
						break
					case 2:
						const week = this.getMonthWeekCur(year, month + 1, day);
						const dates = this.getWeekDate(year, Number(month) + 1, week);
						this.selectStartTime = this.longDateFormate(dates.start, 'ymd');
						this.selectEndTime = this.longDateFormate(dates.end, 'ymd');
						this.planTitle = `${year}年${month + 1}月 第${week}周计划`
						break
					case 3:
						this.selectStartTime = this.longDateFormate(new Date(year, month, 1), 'ymd')
						this.selectEndTime = this.longDateFormate(new Date(year, month + 1, 0), 'ymd')
						this.planTitle = `${year}年${month + 1}月计划`
						break
					case 4:
						this.selectStartTime = this.longDateFormate(new Date(year, 0, 1), 'ymd')
						this.selectEndTime = this.longDateFormate(new Date(year, 12, 0), 'ymd')
						this.planTitle = new Date().getFullYear() + '年计划'
						break
					default:
						this.selectStartTime = ''
						this.selectEndTime = ''
						this.planTitle = ''
				}
			},
			getYearWeekCur(y, m, d) { //一年中的第几周
				var targetDay = new Date(y, m - 1, d);
				var year = targetDay.getFullYear();
				var month = targetDay.getMonth();
				var days = targetDay.getDate();
				//那一天是那一年中的第多少天
				for (var i = 1; i < m; i++) {
					days += getMonthDays(year, i);
				}
				//那一年第一天是星期几
				var yearFirstDay = new Date(year, 0, 1).getDay();
				//计算是第几周
				days += yearFirstDay;
				var week = Math.ceil(days / 7);
				return week;
			},
			// day/month/datetime formatter uview中日期选择器格式化
			dayformatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			monthformatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			},
			restformatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}

				if (type === 'hour') {
					return `${value}时`
				}

				if (type === 'minutemiao') {
					return `${value}分`
				}

				if (type === 'second') {
					return `${value}秒`
				}
				return value
			},
			scuessformatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}

				if (type === 'hour') {
					return `${value}时`
				}

				if (type === 'minutemiao') {
					return `${value}分`
				}

				return value
			},
			selectTimeClick(type) {
				this.restType = type
				this.showRestPicker = true
			},
			selectTypeConfirm(item) { // 计划类型确认的方法
				this.defaultType = {
					label: item.value[0].label,
					value: item.value[0].value
				}
				this.handleChangeOrMountd()
				this.selectTypeShow = false
			},
			onWeekConfirm(data) { //  周计划的确认方法
				const {
					year,
					month,
					week
				} = data.obj
				let dates = this.getWeekDate(year, month, week);
				this.selectStartTime = this.longDateFormate(dates.start, 'ymd');
				this.selectEndTime = this.longDateFormate(dates.end, 'ymd');
				this.planTitle = `${year}年${Number(month) + 1}月 第${week}周计划`
				this.showWeekPicker = false
			},
			onDayConfirm(data) { // 日计划的确认方法
				this.selectStartTime = this.longDateFormate(data.value, 'ymd')
				this.selectEndTime = this.longDateFormate(data.value, 'ymd')
				const year = new Date(data.value).getFullYear()
				const month = new Date(data.value).getMonth()
				const day = new Date(data.value).getDate()
				this.planTitle =
					`${this.longDateFormate(data.value, 'cnymd')} ${this.getWeekNam(year,month + 1,day)}计划`
				this.showDayPicker = false
			},
			onMonthConfirm(data) { // 月计划的确认方法
				this.selectStartTime = this.longDateFormate(data.value, 'ymd')
				const year = new Date(data.value).getFullYear()
				const month = new Date(data.value).getMonth()
				const day = this.getMonthDays(year, month + 1)
				this.selectEndTime = this.longDateFormate(new Date(`${year}-${month + 1}-${day}`), 'ymd')
				this.planTitle = `${year}年${month + 1}月计划`
				this.showMonthPicker = false
			},
			onYearConfirm(data) { // 年计划的确认方法
				const year = new Date(data.value).getFullYear()
				this.selectStartTime = this.longDateFormate(new Date(year, 0, 1), 'ymd')
				this.selectEndTime = this.longDateFormate(new Date(year, 12, 0), 'ymd')
				this.planTitle = year + '年计划'
				this.showYearPicker = false
			},
			onRestConfirm(data) { // 其他计划的确认方法
				if (this.restType == '1') {
					this.selectStartTime = this.longDateFormate(data.value, 'ymd-hms')
					this.startEndTime.start = data.value
				} else {
					this.startEndTime.end = data.value
					if (this.startEndTime.start > data.value) {
						return
					}
					this.selectEndTime = this.longDateFormate(data.value, 'ymd-hms')
				}
				this.showRestPicker = false
			},
			onScuessConfirm(data) { // 完成时间确认方法
				// this.planList[this.currIndex].CompletionTime = this.longDateFormate(data.value, 'ymd-hms')
				this.planList[this.currIndex].JHXQ[this.currInfoindex].CompletionTime = this.longDateFormate(data.value,
					'ymd-hms')
				this.showScuessPicker = false
			},
			onMaterTypeConfirm(data) { // 计划事项中的计划类型的确认方法
				this.arrowName = 'arrow-down'
				this.planList[this.currIndex].JHSLLX = data.value[0]
				this.showMaterType = false
			},
			handleMatterTypeClick(index) {
				this.arrowName = 'arrow-up'
				this.currIndex = index
				this.showMaterType = true
			},
			handleMaterTypeCancel() { // 计划事项中的计划类型的清除方法
				this.planList[this.currIndex].JHSLLX = ''
				this.arrowName = 'arrow-down'
				this.showMaterType = false
			},
			handleFooterClick(item, index, infoIndex) { // 底部跳转到不同 关联项的弹窗中 进行关联
				this.currIndex = index
				this.currInfoindex = infoIndex
				switch (item) {
					case '关联客户':
						this.showClient = true
						break
					case '关联人员':
						this.showPersonnel = true
						break
					default:
						this.showScuessPicker = true
				}
			},
			handleAddDelInfo(infoList, index) { // 事项详情的添加or删除
				if (index == undefined) {
					infoList.push({
						data: null
					})
				} else {
					infoList.splice(index, 1)
				}
			},
			handleOrAddMatter(index) { // 添加事项card的删除
				console.log(index);
				if (index == undefined) {
					const newAddPlanList = [...this.planList]
					newAddPlanList.push({
						JHFL: null,
						JHXQ: [{
							data: null
						}],
						JHSLLX: null,
						Sales: null
					})
					this.planList = [...newAddPlanList]
					console.log(this.planList)
					return
				}
				if (index <= 0) return
				// 进行逻辑判断删除
				const newDelPlanList = [...this.planList]
				newDelPlanList.splice(index, 1)
				this.planList = [...newDelPlanList]
			},
			handleNext() { // 下一步 针对于年月日周
				this.handleSubmitValidate((params) => {
					// 保存为草稿的api 然后获取保存草稿的planId 计划id 也需要传入到 addMyPlan中
					console.log(params);
					console.log('下一步');
					uni.redirectTo({
						url: `/packagePlan/pages/addMyPlan/addMyPlan?planType=${this.defaultType.value}&startTime=${this.selectStartTime}`
					})
				})
			},
			handleSubmit() { // 发布 针对于其他计划
				this.handleSubmitValidate((params) => {
					console.log(params);
					console.log('发布');
				})
			},
			handleScratchPaper() { // 保存草稿纸 针对于其他计划
				this.handleSubmitValidate((params) => {
					console.log(params);
					console.log('保存草稿');
				})
			},
			handleSubmitValidate(callback) { // 下一步/草稿纸/发布 提交的校验
				// 进行遍历判断
				const submits = this.planList.map((item, index) => {
					if (!item.JHFL) {
						uni.showToast({
							icon: 'none',
							title: `请输入计划事项`
						})
						return false
					} else if (!item.JHSLLX) {
						uni.showToast({
							icon: 'none',
							title: `请输入计划类型`
						})
						return false
					} else if (!item.Sales) {
						uni.showToast({
							icon: 'none',
							title: `请输入计划数量`
						})
						return false
					} else if (item.JHXQ.some(JHXQItem => !JHXQItem)) {
						uni.showToast({
							icon: 'none',
							title: `请输入计划详情`
						})
						return false
					} else {
						return true
					}
				})
				// 所有数组保证全部通过 才能进行提交
				if (submits.every(item => item === true)) {
					if (submits.length === 0) {
						uni.showToast({
							icon: 'none',
							title: `请至少添加一个事项`
						})
						return
					}
					console.log(this.planList);
					const newPlanList = JSON.parse(JSON.stringify(this.planList)).map(item => {
						Object.keys(item).forEach(key => {
							if (key == 'JHXQ') {
								item['JHXQ'] = item['JHXQ'].map(item => item.data).join("|")
							}
						})
						return item
					})

					let params = {
						JHLX: this.defaultType.value,
						JHBT: this.planTitle,
						JHXQ: newPlanList
					}

					// 为了让时间 
					const startTimeList = this.selectStartTime.split(' ');
					const endTimeList = this.selectEndTime.split(' ');
					if (startTimeList[1]) {
						params.JHStartTime = this.selectStartTime;
					} else {
						params.JHStartTime = this.selectStartTime + ' 00:00:00';
					}
					if (endTimeList[1]) {
						params.JHEndTime = this.selectEndTime;
					} else {
						params.JHEndTime = this.selectEndTime + ' 23:59:59';
					}
					this.params = {
						...params
					}
					callback(this.params)
				}
			},
			handleBack() { // 返回
				this.showClient = false
				this.showPersonnel = false
			},
			handleUpdateClient(data) { // 关联的数据回调
				console.log(data);
				// 原始 单个 关联客户 等一系列的 操作
				// this.planList[this.currIndex].GLKH = data.list
				this.planList[this.currIndex].JHXQ[this.currInfoindex].GLKH = data.list
				this.handleBack()
			},
			handleCorrelationSure(data) {
				console.log('this.currIndex', this.currIndex, 'this.currInfoindex', this.currInfoindex);
				console.log(data);
				// 原始 单个 关联客户 等一系列的 操作
				// this.planList[this.currIndex].GLR = data
				this.planList[this.currIndex].JHXQ[this.currInfoindex].GLR = data
				this.handleBack()
			},
			handleNavagate() { // 跳转到
				uni.navigateTo({
					url: '/packagePlan/pages/dayCorrelationPlan/dayCorrelationPlan'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.wrap {
		/deep/ .u-input {
			border: none;
		}

		.card,
		.correlation-card {
			background-color: #fff;
			border-radius: 8rpx;
			margin: 11px;
			margin-top: 20rpx;
		}

		.correlation-card {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			padding: 12rpx 22rpx;

			.name {
				color: #333;
			}
		}

		.popup {
			height: 86vh;
		}

		.add-btn {
			display: flex;
			align-content: center;
			justify-content: center;
			box-sizing: border-box;
			margin: 0 20rpx;
			border: none;
			font-size: 26rpx;
			color: #157EFB;
			text-align: center;
			line-height: 40rpx;
			padding: 11px;
			background-color: #fff;

			&::after {
				border: none !important;
			}
		}

		.card-list {
			.card {
				padding: 18rpx 16rpx;

				.header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					min-height: 40rpx;
					padding: 10rpx 0 16rpx;
					line-height: 34rpx;

					.del-box {
						padding: 8rpx;
						background-color: #F1F1F5;
						text-align: center;
						line-height: 30rpx;
						margin-left: 40rpx;
						border-radius: 50%;
					}
				}

				.content {
					.row {
						display: flex;
						flex-direction: column;

						.col {
							display: flex;
							width: 100%;
						}

						.footer {
							display: flex;
							width: 100%;
							align-items: center;
							line-height: 46rpx;
							font-size: 26rpx;
							color: #2A8FFC;
							text-align: center;
							margin-top: 20rpx;
							margin-bottom: 6rpx;

							.footer-item {
								flex: 1;
								font-weight: 600;
								text-align: center;
								border-right: 1px solid rgba(229, 229, 229, 0.5);
							}

							.footer-item:nth-last-child(1) {
								border: none;
							}
						}
					}

					.row,
					.rowTwo {
						margin-bottom: 10rpx;

						/deep/ .u-input {
							background-color: #F1F1F5;
							border-radius: 8rpx;
							padding: 10rpx 15rpx 10rpx 20rpx;
							box-sizing: border-box;
							margin: 0 5rpx;
							height: 80rpx;
							line-height: 80rpx;
						}

						/deep/ .u-textarea {
							background-color: #F1F1F5;
							border: none;
							border-radius: 8rpx;
							padding: 10rpx 15rpx 10rpx 20rpx;
							box-sizing: border-box;
							margin: 0 5rpx;
							min-height: 80rpx;
						}
					}

					.rowTwo {
						display: flex;
						align-items: center;

						.select-type {
							display: flex;
							align-items: center;
							width: 240rpx;
							background: #F1F1F5;
							border-radius: 8rpx;
							padding: 0 20rpx;
							line-height: 80rpx;
							color: #999;
							font-size: 15px;
							margin-right: 10rpx;
						}
					}

					.add-icon,
					.sub-icon {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						background-color: #F1F1F5;
						margin-left: 10rpx;
					}
				}

				.footer {
					display: flex;
					align-items: center;
					line-height: 46rpx;
					font-size: 26rpx;
					color: #2A8FFC;
					text-align: center;
					margin-top: 20rpx;
					margin-bottom: 6rpx;

					.footer-item {
						flex: 1;
						text-align: center;
						border-right: 1px solid rgba(229, 229, 229, 0.5);
					}

					.footer-item:nth-last-child(1) {
						border: none;
					}
				}

				.footer-tip {
					display: flex;
					align-items: center;
					font-size: 24rpx;
				}
			}
		}

		.list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			border-bottom: 1px solid #E5E5E5;
			margin: 0 10rpx;
			font-size: 26rpx;
			padding: 12rpx;

			&:nth-last-child(1) {
				border: none;
			}

			.u-flex {
				display: flex;
			}

			.u-flex-1 {
				flex: 1;
			}

			.u-row-right {
				justify-content: flex-end;
			}

			.list-name {
				color: #7A808A;
			}

			.list-info {
				color: #999999;
				text-align: right;
				padding: 0 15rpx;

				&.active {
					color: #333;
				}
			}



			.list-time {
				width: 210rpx;
				margin: 0;
				text-align: center;
			}
		}

		.next-card-btns {
			position: absolute;
			display: flex;
			align-items: center;
			width: 100%;
			height: 108rpx;
			display: flex;
			left: 0;
			bottom: 0;

			.next-btn,
			.scratch-paper-btn {
				flex: 1;
				line-height: 108rpx;
				height: 108rpx;
			}

			.next-btn {
				background-color: #2A8FFC;
				color: #fff;
			}

			.scratch-paper-btn {
				background-color: #fff;
				color: #2A8FFC;
			}
		}
	}
</style>